<template>
  <div>
    <v-header title="发表">
      <a class="item" flex="main:center cross:center" slot="right" @click="form.create()">
        <i class="iconfont icon-edit"></i>
      </a>
    </v-header>
    <v-content>
      <form flex="dir:top" @submit.prevent="form.create()">
        <div class="title">
          <input type="text" placeholder="标题..." v-model="form.title">
        </div>
        <div class="select">
          <select v-model="form.tab">
            <option value="">请选择</option>
            <option value="go">出行</option>
            <option value="clothes">跳蚤</option>
            <option value="travel">旅游</option>
            <option value="house">房产</option>
            <option value="joke">段子</option>
            <option value="beauty">美女</option>
          </select>
        </div>
        <wv-cell :title="form.pickerTime" v-show="form.tab == 'go'" is-link :value="dayAndTime | pickerValueFilter" @click.native="dayPickerShow = true"></wv-cell>
        <wv-picker v-model="dayPickerShow" :slots="daySlots" @change="onChange"></wv-picker>
		<!--
        <div class="con" flex="dir:top" flex-box="1">
          <textarea flex-box="1" placeholder="内容..." v-model="form.content"></textarea>
        </div>
		-->
		<wv-group>
			<wv-textarea placeholder="请输入文本" :rows="3" v-model="form.content" :max-length="100"></wv-textarea>
		</wv-group>

		</br>

		<div class = "post">
			<div v-for="item in form.picture_data">
				<img :src="item"  class="list-img" class="weui_uploader_file">
			</div>
		</div>

		</br>
		
		<div class="weui_uploader_input_wrp" @click="image()">
			
		</div>
      </form>
    </v-content>
    <v-footer></v-footer>
  </div>
</template>
<script>
  import { mapModules } from 'vuet'

  export default {
    mixins: [
      mapModules({ form: 'topic-create', weixin: 'weixin-api' })
    ],
    data () {
      return {
        ticketValue: [],
        dayValue: [],
        pickerTime: '出发时间 ',
        ticketPickerShow: false,
        dayPickerShow: false,
        daySlots: [
         {
            values: [
              '今天',
              '明天'
            ],
            defaultIndex: 0
          },

          {
            values: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
            defaultIndex: 0
          },
          {
            values: ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20',
                     '21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40'
                    ,'41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59'],
            defaultIndex: 0
          }
        ]
      }
    },

    created: function () {
        var _this = this;
        _this.form.pickerTime = '';
	},
    methods: {
     
	  /*
      async submit () {
        const res = await this.form.create()
        if (res && res.success) {
          this.$router.push({
            path: `/topic/${res.topic_id}`
          })
        }
      }
	  */
      onChange (picker, value) {
        var _this = this;

        _this.GetDateStr = function GetDateStr(AddDayCount) {
                var dd = new Date();
                dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
                var y = dd.getFullYear();
                var m = dd.getMonth()+1;//获取当前月份的日期
                var d = dd.getDate();
                return y+"-"+m+"-"+d;
        }
        this.$nextTick(() => {
          console.log(picker.getValues())
          var pickerTime = picker.getValues();

          if (pickerTime[0] == '今天') {
            _this.form.pickerTime = _this.GetDateStr(0) + ' ' + pickerTime[1] + '-' + pickerTime[2] + '-' + '00'
          } else {

            _this.form.pickerTime = _this.GetDateStr(1) + ' ' + pickerTime[1] + '-' + pickerTime[2] + '-' + '00'
          }
          
        })
      },
	  async image () {
		console.log("image");
		var _this = this;
		_this.form.picture_list = [];
		_this.form.picture_data = [];
		this.weixin.image(function cb(res) {
			for (var i = 0; i < res.length; i++) {
				_this.form.add("http://m.doubilol.com/static/upload/" + res[i] + ".jpg");
			}
			//alert(_this.form.picture_data);
		}, _this.form.picture_data);

	  }
    },

    filters: {
      pickerValueFilter (val) {
        if (Array.isArray(val)) {
          return val.toString()
        } else {
          return '请选择'
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  form {
    height: 100%;
  }


  .title {
    padding: 5px 10px;
  }


  .select {
    padding: 5px 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    select {
      padding: 0;
      border-radius: 5px;
      background: none;
    }
  }


  .con {
    padding: 5px 10px;
    textarea {
      line-height: 24px;
    }
  }


  input,
  select,
  textarea {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 0 5px;
    line-height: 28px;
    border: none;
    font-size: 14px;
    resize: none;
  }

.weui_uploader_input_wrp {
    float: left;
    position: relative;
    margin-right: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #d9d9d9;
	margin-bottom: 9px;
}

.weui_uploader_input_wrp:before {
    width: 2px;
    height: 39.5px;
}

.weui_uploader_input_wrp:after {
    width: 39.5px;
    height: 2px;
}

.weui_uploader_input_wrp:after, .weui_uploader_input_wrp:before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #d9d9d9;
}

.weui_uploader_input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.weui_uploader_file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    height: 79px;
    background: no-repeat center center;
    background-size: cover;
}


.post .list-img {
    width: 33%;
    height: 90px;
    width: 90px;
    padding-left: 5px;
    padding-right: 5px;
    float: left;
    object-fit: cover;
}

.post img {
    padding: 10px 5px 0 0;
    display: block;
	min-height:80px;
	min-width:80px;
    max-height: 130px;
    max-width: 130px;
}
</style>
